<template>
    <div class='h-100 relative' v-size.paddingLeft='30'>
        <div id='_echart-container' ref='container'>
            <div class='h-100 relative' v-if='value'>
                <v-chart style='height: 100%;width: 100%;' :options='options'></v-chart>
            </div>
            <loading v-else></loading>
        </div>
        <div id='_info' class='middle'>
            <div class='item flex' v-for='(item, key) in infoList' :key='key'>
                <color-block-text v-flex='1' type='square' :color='item.color'>
                    <span class='m-l-10 color-a9abaf'>{{item.name}}</span>
                </color-block-text>
                <span v-flex='1'>{{item.rate}}%</span>
                <span v-flex='1'><countTo :endVal='item.value'></countTo></span>
            </div>
        </div>
    </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
    props : {
        value : {
            type : [Array, Object],
            default : function() {
                return []
            }
        }
    },
    
    data() {
        return {
            totalTime : 0,
            show : false,
            infoList : []
        }
    },

    components : {
        countTo
    },

    computed : {
        options () {
			this.infoList.splice(0)
            var colorList = ['28,178,255', '255,150,115', '190,133,255', '255,214,89', '105,204,25', '243,53,111', '54,215,96', '7,183,181']
            var W = this.$refs.container.clientHeight * 1 / 2
            var radius = W - 20
            var minAngle = 30
            var minRate = minAngle / 360
            var data = this.value
            


            data.sort(function(a, b) {
                return b.value - a.value
            })

            var sum = 0
            data.forEach((v, i) => {
                sum += v.value
                
                if(i == 0) {
                    v.radius = radius
                }else {
                    if(v.value < data[i - 1].value) {
                        radius -= 6
                    }

                    v.radius = radius
                }
            })

            this.totalTime = (sum / 60)

            var incrValue = 0
            var minValue = sum * minRate
            data.forEach((v, i) => {
                var color = colorList[i]
                this.infoList.push({
                    name : v.name,
                    value : v.value,
                    rate : (v.value / sum * 100).toFixed(2),
                    color : `rgb(${color})`
                })


                v.v = v.value
                if(v.value < minValue) {
                    incrValue += (minValue - v.value)
                    v.value = minValue
                }
            })

            if(incrValue >= 1) {
                while(true) {
                    for(let i = 0; i < data.length; i ++) {
                        var item = data[i]
                        if(item.value >= (minValue + 1)) {
                            item.value --
                            incrValue --
                        }
                    }
                    if(incrValue < 1) {
                        break
                    }
                }
            }
            
            
            
            sum = 0
            data.forEach(v => {
                sum += v.value
            })
            

            var startAngle = 360
            var series = [
                {
                    type : 'pie',
                    startAngle : startAngle,
                    silent : true,
                    center : ['50%', '50%'],
                    radius : [W - 5, W],
                    labelLine: {
                        show: false,
                    },
                    label : {
                        show : false,
                    },
                    itemStyle : {
                        color : '#202d48',
                        opacity : 0.3
                    },
                    data : [10]
                },

                {
                    type : 'pie',
                    startAngle : startAngle,
                    silent : true,
                    center : ['50%', '50%'],
                    radius : [0, W - 10],
                    labelLine: {
                        show: false,
                    },
                    label : {
                        show : false,
                    },
                    itemStyle : {
                        color : '#253047',
                        opacity : 0.3
                    },
                    data : [10]
                }
            ]

            var offset = 0 / 360 * sum
            
            
            data.forEach((item, index) => {
                var c = colorList[index]
                var v = item.value
                var color = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: `rgba(${c}, 0.1)` // 0% 处的颜色
                    }, {
                        offset: 1, color: `rgba(${c}, 1)` // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
                var serie = {
                    type : 'pie',
                    startAngle : startAngle,
                    silent : true,
                    center : ['50%', '50%'],
                    radius : ['30%', item.radius],
                    labelLine: {
                        show: false,
                    },
                    label : {
                        show : false,
                    },

                    data   : [
                        {name : item.name, value : v - offset, v : item.v, itemStyle : {color : color}},
                        {name : item.name, value : sum - v, v : v, itemStyle : {color : 'transparent'}}
                    ]
                }
                series.push(serie)
                startAngle -= (v / sum * 360)
            })
            
            var options =  {
                grid : {
                    top : '0px',
                    right : '0px',
                    bottom : '0px',
                    left : '0px'
                },

                series: series
            }

            return options
        }
    },
}
</script>

<style scoped lang='scss'>
    #_echart-container{
        width: 180px;
        height: 180px;
    }

    #_info{
        position: absolute;
        width: 320px;
        left: 250px;
        .item{
            margin-top: 20px;
            &:first-of-type{
                margin-top: 0;
            }
        }
    }
</style>